
.cell-time {
  color: #999;
  font-size: 22rpx;
  text-align: center;
  margin: 30rpx 0 0;
}

.blue-btn {
  height: 40rpx;
  line-height: 40rpx;
  background: #2194ff;
  border-radius: 20rpx;
  padding: 0 10rpx;
  color: #fff;
  font-size: 20rpx;
}

.item-row {
  margin: 30rpx 0 0;
}

.col-con {
  max-width: 400rpx;
  display: flex;
  flex-direction: column;
}

.col-w400 {
  width: 400rpx;
}

.line2 {
  height: 2rpx;
  background: #f6f6f6;
}




.col-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  overflow: hidden;

  .avatar {
    width: 100%;
    height: 100%;
  }
}





.chat-list {
  padding: 20rpx 30rpx 50rpx 30rpx;
  background: #F6F7F8;
}

// 左边
.row-left {
  .col-avatar {
    float: left;
    margin-right: 16rpx;
  }

  .col-con {
    float: left;
    align-items: flex-start;
  }

  .role-tag {
    float: left;
    margin-right: 8rpx;
  }

  .role-username {
    float: left;
    font-weight: 400;
  }

  .con-raidus {
    border-radius: 0px 12rpx 12rpx 12rpx;
  }

  .con-bg {
    background: #fff;
    color: #333333;
  }

  .qa-ask {
    background: #fff;
    color: #333;
  }
}

//右边
.row-right {
  .col-avatar {
    float: right;
    margin-left: 16rpx;
  }

  .col-con {
    float: right;
    align-items: flex-end;
  }

  .role-tag {
    float: right;
    margin-left: 8rpx;
  }

  .role-username {
    float: right;
  }

  .con-raidus {
    border-radius: 8rpx 0px 8rpx 8rpx;
  }

  .con-bg {
    background: #2194ff;
    color: #fff;
  }

  .qa-ask {
    background: #deecfa;
    color: #333;
  }

  .msg-pic {
    image {
      float: right;
    }
  }
}



//标签 
.role-teacher,
.role-admin,
.role-guest {
  padding: 0 6rpx;
  height: 28rpx;
  line-height: 28rpx;
  overflow: hidden;
  display: inline-block;
  border-radius: 4rpx;
  color: #fff;
  font-size: 20rpx;
}

.role-teacher,
.role-guest {
  background: #2194ff;
}

.role-admin {
  background: linear-gradient(316deg, #f45300, #ff9f5a 88%);
}

.role-username {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 28rpx;
  line-height: 28rpx;
  max-width: 300rpx;
  font-size: 28rpx;
}

//图片消息
.msg-pic {
  width: 300rpx;
  height: 200rpx;

  image {
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
  }
}

.msg-video{
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
}

// 语音
.audio-play,
.audio-pause,
.audio-loading {
  font-size: 48rpx;
  color: #2194ff;
}

.audio-loading {
  position: relative;
  animation: loading 2s linear infinite;
  -webkit-animation: loading 2s linear infinite;
}

@keyframes loading {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

.audio-transtxt {
  margin: 14rpx 0 0;
  padding: 14rpx 0 0;
  border-top: 1px dashed #e5e5e5;
}

.choosePick {
  color: #2194ff;
}

.audio-control {
  height: 36rpx;
  margin: 0 8rpx;
  position: relative;
  width: 200rpx;

  .controlbg {
    height: 4rpx;
    background: #f2f2f2;
    border-radius: 4rpx;
    width: 100%;
  }

  &.min {
    width: 75rpx !important;
  }

  &.max {
    width: 280rpx !important;
  }

  .btn-playhead {
    width: 12rpx;
    height: 12rpx;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    margin-top: -6rpx;
    background: #2194ff;
  }

  .playprogress {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    height: 4rpx;
    background: #2194ff;
    border-radius: 4rpx;
  }
}

.ask-pic {
  width: 32rpx;
  height: 32rpx;
  background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/21_material_admin/image/assets/images/qa_ask_pic.png") no-repeat top center;
  background-size: 100% 100%;
}

.qa-answer_ask {
  border-bottom: 1px dashed #f0f0f0;
}

.ask-img {
  width: 100%;
  height: 180rpx;
  border-radius: 10rpx;
}

.qa-answer_ask {
  border-bottom: 1px dashed #f0f0f0;
}

.qa-answer_img {
  width: 100%;
  height: 240rpx;
}

.msg-money-pic {
  width: 48rpx;
  height: 40rpx;
}

.source-pic {
  width: 168rpx;
  height: 112rpx;
}

.source-activity-pic {
  width: 100%;
  height: 240rpx;
  border-radius: 10rpx;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
  }
}

.coupon-pic {
  width: 104rpx;
  height: 112rpx;
  overflow: hidden;
  margin-right: 10rpx;
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/21_material_admin/image/assets/images/youhuiquan_2.png");

  &.type-1,
  &.type-4,
  &.type-6 {
    background-image: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/21_material_admin/image/assets/images/youhuiquan_1.png");
  }
}

.coupon-pic-mid {
  font-weight: 600;
  font-size: 28rpx;
  color: #8B511E;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.coupon-pic-up {
  width: 104rpx;
  height: 68rpx;
  font-size: 28rpx;
  line-height: 1.2;
  display: table-cell;
  vertical-align: middle;
  font-weight: 600;
  color: #8B511E;
  word-break: break-all;
  text-align: center;
}

.coupon-pic-down {
  height: 42rpx;
  line-height: 42rpx;
  font-size: 20rpx;
  font-weight: 400;
  text-align: center;
  overflow: hidden;
  color: #97612B;
}

.handle-recommend {
  height: 40rpx;
  line-height: 40rpx;
  background: #2194ff;
  border-radius: 21rpx;
  color: #fff;
  font-size: 20rpx;
  padding: 0 15rpx;
}

.recommed-pic-type1 {
  width: 150rpx;
  height: 100rpx;
  border-radius: 4rpx;
  margin: 0 10rpx 0 0;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
    border-radius: 4rpx;
  }
}


.recommed-pic-type2 {
  width: 100%;
  height: 240rpx;

  image {
    width: 100%;
    height: 100%;
    border-radius: 4rpx;
  }
}

.bg-flashSales {
  display: inline-block;
  font-size: 20rpx;
  padding: 0 8rpx;
  color: #fff;
  background: linear-gradient(to right,
      rgba(255, 83, 85, 1) 0%,
      rgba(255, 83, 85, 0.7) 100%);
  border-radius: 0px 7rpx 7rpx 7rpx;
}